<template>
	<view class="login_page">
		<view class="page_login">
			<view class="login_main">
				<view class="login_tag">
					<text class="login_title">
						欢迎，请登录
					</text>
					<text class="login_text">
						未注册的手机号将自动注册并登录
					</text>
				</view>
				
				<view class="login_input">
					<input v-model="mobile" type="number" class="input_text" placeholder="请输入手机号" placeholder-style="color:#999;">
					<view class="login_code">
						<input v-model="code" type="number" class="input_code" placeholder="请输入验证码" placeholder-style="color:#999;">
						<text class="input_tags" @click="huoqu" :disabled="disabled" type="default" hover-class="none">{{btnTitle}}</text>
					</view>
				</view>
				<view @click="denglu()" class="mt-60 login-button">
					登录
				</view>
			</view>
			<view class="w100 f26 lh-54 mt-30">
				<image @click="xieyi()" class="xun_icon" :src="xie==1?'../../static/img/xuanzhong.png':'../../static/img/weixuan.png'" mode=""></image>
				<text class="ml-14">
					<text class="c999" @click="xieyi()">我已阅读并同意</text>
					<text @click="aboutProtocol(2)" class="c000">《用户协议》</text>
					<text class="c999"> </text>
					<text @click="aboutProtocol(1)" class="c000">《隐私政策》</text>
				</text>
			</view>

		</view>
		
		<!-- 承诺 -->
		<u-popup :show="showPromise" :closeable="true" mode="center" bgColor="#484848" round="10rpx" :safeAreaInsetBottom="false" @close="closePromise" @open="openPromise">
			<view class="promise">
				<view class="text">
					{{instructions}}
				</view>
				<!-- <view class="btn" @click="clickAgree">
					我已知晓，同意
				</view> -->
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromid:'',
				liveId:'',
				xie: 2,
				guan: 2,
				xianshi: true,
				btnTitle: "获取验证码",
				disabled: false,
				mobile: '',
				code: '',
				instructions: '',
				showPromise: false,
			}
		},
		onLoad(opt) {
			this.fromid = uni.getStorageSync('fromid');
			if(opt.liveId){
				console.log('liveId-----', opt.liveId)
				this.liveId = opt.liveId
			}
		},
		methods: {
			getPhoneNumber(res){
				const that = this
				console.log('获取code---',res.detail.code)
				if (res.detail.errMsg == "getPhoneNumber:ok") {
					uni.request({
						url: `https://www.shenmaio.com/api/wechat_phone?from=miniprogram&bid=888&code=${res.detail.code}`,
						success: (ret) => {
							console.log('接口wechat_phone------',ret)
							if(!ret.data.status) {
								uni.showToast({ title: ret.data.message, icon: "error" })
								return;
							}
							uni.request({
								url: `https://www.shenmaio.com/api/aigc_login?phone=${ret.data.data}&login_type=wechat_login&fromid=${that.fromid}&from=miniprogram`,
								//url: `https://www.shenmaio.com/api/aigc_login?phone=${13795219626}&login_type=wechat_login&from=miniprogram`,
								success: (resa) => {
									console.log('登录aigc_login---',resa);
									if(!resa.data.status) {
										uni.showToast({ title: resa.data.message, icon: "error" })
										return;
									}
									uni.authorize({
									    scope: 'scope.record',
									    success() {
											console.log('同意获取麦克风权限---');
									        uni.setStorageSync("userInfo", JSON.stringify(resa.data.data));
									        uni.setStorageSync("token", resa.data.data.token);
									        uni.setStorageSync("isLogin", true);
									        uni.setStorageSync("userId", resa.data.data.user_id);
									        uni.reLaunch({
									        	url: "/pages/index/index?liveId=" + that.liveId
									        })
									    },
										fail(){
											console.log('拒绝获取麦克风权限---');
										}
										
									})
									
								}
							})
						}
					})
				}else{
					uni.showToast({
						title: '授权已取消',
						icon: 'error',
						mask: true,
					});
				}
			},
			gotoNext(){
				// wx.login({
				//   success (res) {
				// 	  console.log('code----', res.code)
				// 	if (res.code) {
				// 	  //发起网络请求
				// 	  wx.request({
				// 		url: 'https://example.com/onLogin',
				// 		data: {
				// 		  code: res.code
				// 		}
				// 	  })
				// 	} else {
				// 	  console.log('登录失败！' + res.errMsg)
				// 	}
				//   }
				// })
				uni.redirectTo({
					url: '/pages/index/index?liveId=' + this.liveId
				});
			},
			// 关于隐私协议
			aboutProtocol: function(index) {
				uni.$u.http.get('/api/vip_settings').then(res => {
					this.instructions = res.data.data.webview
					uni.navigateTo({
						url: '/aboutUs/webView?weburl=' + this.instructions[index]['weburl']
					})
					console.log('webview', this.instructions)
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取验证码
			huoqu: function() {
				if(this.disabled){
					uni.showToast({
						title: '请勿重复发送',
						icon: "error",
						duration: 1000
					})
					return
				}
				if (this.mobile == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "error",
						duration: 1000
					})
					return
				} else if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					uni.showToast({
						title: '请输入正确手机',
						icon: "error",
						duration: 1000
					})
					return
				} else {
					uni.$u.http.post('https://www.tuikeai.com/Login/saas_sendsms?from=$from', {
						smskey: "6284765fe7466750921572aa091569b2",
						phone: this.mobile
					}).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '发送成功',
							icon: "success",
							duration: 1000
						})
						this.validateBtn()
					}).catch(err => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: "请稍后再试",
							icon: "error",
							duration: 1000
						})
						clearInterval(timer);
					})
				
				}
			},
			// 倒计时
			validateBtn() {
				//倒计时
				let time = 60;
				let timer = setInterval(() => {
					if (time == 0) {
						clearInterval(timer);
						this.disabled = false;
						this.btnTitle = "获取验证码";
					} else {
						this.btnTitle = time + '秒后重试';
						this.disabled = true;
						time--
					}
				}, 1000)
			},
			xieyi: function() {
				if (this.xie == 1) {
					this.xie = 2
				} else {
					this.xie = 1
				}
			},
			denglu: function() {
				let that = this
				if (this.xie == 2) {
					uni.showToast({
						icon: 'error',
						title: '请阅读协议'
					})
					return
				} else if (this.mobile == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "error",
						duration: 1000
					})
					return
				} else if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: "error",
						duration: 1000
					})
					return
				} else if (this.code == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: "error",
						duration: 1000
					})
					return
				} else {
					uni.$u.http.post('https://www.tuikeai.com/api/aigc_login', {
						code: this.code,
						phone: this.mobile,
						login_type: "phone_login",
						from: "miniprogram",
						fromid: ""
					}).then(res => {
						console.log('登录成功-----', res.data.data)
						uni.hideLoading();
						uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
						uni.setStorageSync("token", res.data.data.token);
						uni.setStorageSync("isLogin", true);
						uni.setStorageSync("userId", res.data.data.user_id);
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}).catch(err => {
						console.log(err)
						uni.hideLoading();
						uni.showToast({
							title: '验证码错误',
							icon: "error",
							duration: 1000
						})
					})
				}
			},
			openPromise() {
				// console.log('open');
			},
			closePromise() {
				this.showPromise = false
				// console.log('close');
			},
		},
	}
</script>

<style lang="scss" scoped>
.page_login{
	width: 100%;
	height: 100vh;
	background: linear-gradient(180deg, #050513 0%, #000000 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	padding:10vh 0 8vh;
	box-sizing: border-box;
	.logo{
		width: 166rpx;
	}
	.login_text{
		color: #eee;
		font-size: 28rpx;
		line-height: 40rpx;
		padding:30rpx 0 100rpx;
		width: 70%;
	}
	.login_img{
		width: 586rpx;
		margin-bottom: auto;
	}
	.login_btn{
		display: block;
		width: 666rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		opacity: 1;
		background: #F2B901;
		font-size: 30rpx;
		font-weight: bold;
	}
}
.promise{
	width: 560rpx;
	box-sizing: border-box;
	padding:10rpx 30rpx 35rpx;
	.btn{
		height: 70rpx;
		border-radius: 35rpx;
		background: #F9BE01;
		line-height: 70rpx;
		text-align: center;
		color: #3D3D3D;
		font-size: 26rpx;
		font-weight: 600;
		margin-top: 25rpx;
	}
	.title{
		text-align: center;
		font-size: 26rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #FFFFFF;
		padding:25rpx 0 25rpx;
	}
	.text{
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		color: #FFFFFF;
		text-align: justify;
	}
}
.login-button{
	width: 70%;
	height: 90rpx;
	background-color: #F9BE01;
	border-radius: 90rpx;
	line-height: 90rpx;
	color: #000000;
	font-size: 40rpx;
	text-align: center;
}
.login_main{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 100%;
	height: 60%;
	margin-top: 100rpx;
}
.login_input{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 100%;
}
.input_text{
	width: 70%;
	border-bottom: 1rpx solid #666;
}
.login_code{
	width: 70%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 70rpx;
	border-bottom: 1rpx solid #666;
}
.input_code{
	width: 60%;
	
}
.login_tag{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: inherit;
	width: 100%;
}
.login_title{
	font-size: 50rpx;
	text-align: left;
	width: 70%;
}
.input_tags{
	color: #F9BE01;
	border-left: 1rpx solid #666;
	padding-left: 15rpx;
	margin-bottom: 5rpx;
}
.xun_icon{
	width: 30rpx;
	height: 30rpx;
	position: relative;
	top: 7rpx;
	right: 7rpx;
}
.ml-14{
	font-size: 25rpx;
}
.c000{
	color: #F9BE01;
}
</style>
